﻿<!DOCTYPE html>
<html lang="zn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>采购订单新增/修改</title>
    <meta name="renderer" content="webkit">
    <base th:href="@{/}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/css/x-admin.css" media="all">
    <link rel="stylesheet" href="static/css/backstage.css" media="all">
    <script src="static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="static/kindeditor/themes/default/default.css"/>
    <link rel="stylesheet" href="static/kindeditor/plugins/code/prettify.css"/>
    <script charset="utf-8" src="static/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="static/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="static/kindeditor/plugins/code/prettify.js"></script>
    <link rel="stylesheet" href="static/js/layui/css/layui.css" media="all">
    <script src="static/js/layui/layui.all.js"></script>
    <script>
        //上传图片显示
        function filefun(th) {
            var file = th.files[0]
            if (/image\/\w+/.test(file.type)) {
                var read = new FileReader()
                read.readAsDataURL(file)
                read.onload = function (ev) {
                    var img = new Image()
                    var data = this.result;
                    img.src = data
                    img.onload = function () {
                        alert((this.width) / (this.height));
                      //  if ((this.width) / (this.height) == 1.625) {
                            document.getElementById("imgmsg").innerHTML = ""
                            //document.getElementsByClassName("imgdiv")[0].innerHTML=""
                            //img.style.width="150px";
                            //    img.style.height="100px";
                            //    document.getElementsByClassName("imgdiv")[0].appendChild(img)
                            //    document.getElementById("imgmsg").innerHTML=""
                       // } else {
                          //  document.getElementById("imgmsg").innerHTML = "图片比例不正确";
                        //}
                    };
                }
            }else {
                document.getElementById("imgmsg").innerHTML = "请上传图片格式"
            }
        }
    </script>
</head>

<body>
<div class="wrap">
    <div class="x-nav">
        <div class="title">
            <a><cite>国际采购订单管理 >> 采购订单新增/修改</cite></a>
            <a href="page/procurement" class="back">返回上页</a>
        </div>
    </div>
    <div class="x-body">
        <form action="addSupplyOrder" class="fom" id="orderform" method="POST" enctype="multipart/form-data">
            <table class="infotable cggy">
                <tr>
                    <td width="20%">
                        <label>订单中文名称： </label>
                    </td>
                    <td width="50%">
                        <input type="text" maxlength="50" class="inp" id="orderNamech" name="orderNamech"
                               onblur="checkOrderNamech()"/>
                    </td>
                    <td width="30%">
                        <span id="orderNamechspan" class="msg">*</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label> 订单英文名称：</label>
                    </td>
                    <td>
                        <input type="text" maxlength="90" class="inp" id="orderNameen" name="orderNameen"
                               onblur="checkOrderNameen()"/>
                    </td>
                    <td>
                        <span id="orderNameenspan" class="msg">*</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label> 发布日期：</label>
                    </td>
                    <td>
                        <input type="text" autocomplete="off" id="publishtime" name="publishTime">
                    </td>
                    <td>
                        <span id="publishtimespan" class="msg">*</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>订单分类：</label>
                    </td>
                    <td>
                        <select name="businessId" id="businessid">
                            <option value="1">轻工业类</option>
                            <option value="2">重工业类</option>
                            <option value="3">农业类</option>
                            <option value="4">纺织类</option>
                            <option value="5">日用百货类</option>
                            <option value="6">食品类</option>
                            <option value="7">运动休闲类</option>
                            <option value="8">3C产品类</option>
                        </select>
                    </td>
                    <td>
                        <span class="msg">*</span>
                    </td>
                </tr>
                <!--
                 <tr>
                  <td>
                        <label> 点  击  量：</label>
                  </td>
                  <td>
                        888
                  </td>
                  <td >
                      <span class="msg">*</span>
                  </td>
                </tr>
                  -->
                <tr>
                    <td>
                        <label> 订单状态：</label>
                    </td>
                    <td>
                        <select name="tradeFlag" id="tradeflag">
                            <option value="0">进行中</option>
                            <option value="1">已完成</option>
                        </select>
                    </td>
                    <td>
                        <span class="msg">*</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label> 企业名称： </label>
                    </td>
                    <td>
                        <input type="text" maxlength="50" class="inp" id="comname" name="companyName"
                               onblur="checkComname()"/>
                    </td>
                    <td>
                        <span id="comnamespan" class="msg">*</span>
                    </td>
                </tr>
                <tr>
                    <td><label>是否推荐：</label></td>
                    <td colspan="2">
                        <div class="sel lableft">
                            <input type="radio" name="recomFlag" id="recomflag1" value="1" checked> <label>推荐</label>
                            <input type="radio" name="recomFlag" id="recomflag0" value="0"> <label>不推荐</label>
                        </div>
                        <div><span>(注：默认即推荐到首页展示)</span></div>
                    </td>
                </tr>
                <tr>
                <tr>
                    <td>
                        <label> 订单摘要：</label>
                    </td>
                    <td colspan="2">
					<textarea id="summary" maxlength="200" name="summary" class="inp" style=" height:100px"
                              placeholder="输入文字摘要，建议200字以内"></textarea>

<!--                        <input type="hidden" value="" name="writer" id="user">-->
                        <input type="hidden" value="" name="operatorId" id="user">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>图片上传：</label>
                    </td>
                    <td colspan="2">
                        <div class="lableft">
                            <table>
                                <tr>
                                    <td>

                                        <div class="files" style='width:150px;'>
                                            <div class="imgdiv" style='height:100px'><img src="" id="img1"/></div>
                                            <a href="javascript:;" class="but-upload">
                                                <input id="file1" type="file" name="files"
                                                       onchange="showImg('file1','img1')">上传图片
                                            </a>

                                        </div>


                                    </td>
                                    <td>
                                        <div class="files" style='width:150px;'>
                                            <div class="imgdiv" style='height:100px'><img src="" id="img2"/></div>
                                            <a href="javascript:;" class="but-upload">
                                                <input id="file2" type="file" name="files"
                                                       onchange="showImg('file2','img2')">上传图片
                                            </a>
                                        </div>

                                    </td>
                                    <td>
                                        <div class="files" style='width:150px;'>
                                            <div class="imgdiv" style='height:100px'><img src="" id="img3"/></div>
                                            <a href="javascript:;" class="but-upload"> <!-- class="but-upload" -->
                                                <input id="file3" type="file" name="files"
                                                       onchange="showImg('file3','img3')">上传图片
                                            </a>
                                        </div>


                                    </td>
                                    <td>
                                        <div>
                                            <p>建议图片宽高比例为260:160</p>
                                            <p class="msg" id="imgmsg"></p>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>
                        <label>详细介绍：</label>
                    </td>
                    <td colspan="2">
					<textarea id="details" name="details" class="content" placeholder="请输入内容">
									 商品详细介绍，包括图片和文字</textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input id="addorderbtn" type="button" class="btn" value="提交" onclick="addorder()"/>
<!--                        <input type="button" class="btn" value="预览" onclick="preview()"/>-->
                    </td>
                </tr>

            </table>
            <input type="hidden" id="orderid" name="orderId"/>
            <input type="hidden" id="addflag" name="addflag" value="0"/>
        </form>
    </div>
</div>
<!-- 初始化KindEditor编辑器 -->
<script type="text/javascript">
    KindEditor.ready(function (K) {
        editor1 = K.create('textarea[name="details"]', {
            cssPath: 'static/kindeditor/plugins/code/prettify.css',
            height: '400px',

            uploadJson: 'uploadimg',
            //uploadJson : 'article/uploadimg',
            //	fileManagerJson : '${APP_PATH}/kindeditor/jsp/file_manager_json.jsp',
            allowFileManager: false,
            allowImageRemote: false,
            afterBlur: function () {  //解决js无法提交的bug
                this.sync();
            }
        });
        prettyPrint();
    });

</script>
<script>

    //validate input

    function checkOrderNamech() {
        var orderNamech = $("#orderNamech").val();

        var re = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (re.test(orderNamech)) {
            $("#orderNamechspan").html("*");

            return true;
        }
        $("#orderNamechspan").html("请输入中文订单名称");

        return false;
    }

    function checkOrderNameen() {
        var orderNameen = $("#orderNameen").val();
        var re = /[a-zA-Z0-9_-]+$/;//;
        if (re.test(orderNameen)) {
            $("#orderNameenspan").html("*");
            return true;
        }
        $("#orderNameenspan").html("请输入英文订单名称");

        return false;
    }

    function checkComname() {
        var comname = $("#comname").val();
        if (comname) {
            $("#comnamespan").html("*");
            return true;
        }
        $("#comnamespan").html("请输入企业名称");
        return false;
    }

    function checkPublishtime() {
        var publishtime = $("#publishtime").val();

        if (publishtime != "") {
            $("#publishtimespan").html("*");
            return true;
        }
        $("#publishtimespan").html("请选择正确日期");
        return false;

    }

    function checkImage() {
        var img1 = $("#img1").attr("src");
        var img2 = $("#img2").attr("src");
        var img3 = $("#img3").attr("src");


        var checkflag1 = img1 == "" || img2 == "" || img3 == "";


        if (checkflag1) {
            $("#imgmsg").html("请上传3张图片");
            return false;
        }


        $("#imgmsg").html("");
        return true;
    }

    function checkAll() {
        var flg1 = checkOrderNamech();
        var flg2 = checkOrderNameen();
        var flg3 = checkPublishtime();
        var flg4 = checkComname();
        var flg5 = checkImage();
        var map = new Map();
        if (!flg5) {
            map.set("eid", "#file1");
        }
        if (!flg4) {
            map.set("eid", "#comname");
        }
        if (!flg3) {
            map.set("eid", "#publishtime");
        }

        if (!flg2) {
            map.set("eid", "#orderNameen");
        }
        if (!flg1) {
            map.set("eid", "#orderNamech");
        }
        var checkflag = flg1 && flg2 && flg3 && flg4 && flg5

        if (!checkflag) {
            alert("内容输入有误,请按提示修正后再提交!");
            $(map.get("eid")).focus();
        }
        return checkflag;
    }

    //获得请求参数
    function getQueryParam(paramName) {
        var query = window.location.search.substring(1);

        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == paramName) {
                return pair[1];
            }
        }
        return (false);
    }

    //回显图片
    function showImg(fileid, imgid) {
        var windowURL = window.URL || window.webkitURL;
        var loadImg = windowURL.createObjectURL(document.getElementById(fileid).files[0]);
        document.getElementById(imgid).setAttribute('src', loadImg);

        document.getElementById(imgid).setAttribute("height", "100");
        document.getElementById(imgid).setAttribute("width", "100");
        filefun(document.getElementById(fileid));
    }

    //向模板填充数据
    function displayDetails(order) {

        $("#orderNamech").val(order.orderNamech); //chinese name of imported goods
        $("#orderNameen").val(order.orderNameen); //English name of imported goods
        $("#publishtime").val(order.publishTime); //发布日期：2021-01-05

        $("#businessid").val(order.businessId); //行业分类：轻工业类
        setDefaultSelected("#businessid", order.businessId);
        //
        $("#img1").attr("src", "images/orders/"+order.img1); //img1
        $("#img2").attr("src", "images/orders/"+order.img2); //img2
        $("#img3").attr("src", "images/orders/"+order.img3); //img3
        $("#clickcount").val(order.clickCount); //点击量：88888
        $("#comname ").val(order.companyName);
        $("#recomflag").val(order.recomFlag);
        if ("1" == order.recomFlag) {
            $("#recomflag1").attr("checked", true);
        } else {
            $("#recomflag0").attr("checked", true);
        }


        $("#tradeflag").val(order.tradeFlag); //订单状态
        setDefaultSelected("#tradeflag", order.tradeFlag);
        $("#details").html(order.details); //详细内容 summary
        editor1.html(order.details);
        $("#summary").html(order.summary);
        $("#orderid").val(order.orderId);
    }

    //获得ajax请求数据,生成列表html
    function createOrder(url) {

        $.ajax({
            url: url,
            type: "get",
            dataType: "json",
            cache:false,
            success: function (result) {
                if (result.message == "success") {
                    alert("成功")
                    displayDetails(result.t)
                }
            }
        });

    }

    function initDetailsPage() {
        var paramsStr = window.location.search.substring(1);

        var url = "orders/findPurchaseOrderByid" + '?' + paramsStr;

        createOrder(url)
    }

    //设置下拉列表框默认选中 待完成
    function setDefaultSelected(selectid, value) {
        var opts = $(selectid).find("option");
        for (var i = 0; i < opts.length; i++) {
            if ($(opts[i]).val() == value) {
                $(opts[i]).attr("selected", "selected");
            }
        }
    }

    //初始化页面 判断操作类型
    $(function () {
        //设置时间控件浏览器兼容性
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({elem: '#publishtime'});
        });
        var orderId = getQueryParam("orderId");

        if (orderId) { // modify  <form id="orderform" action="addSupplyOrder"
            $("#addorderbtn").val("修改订单");
            $("#orderform").attr("action", "orders/updatePurchaseOrder");
            $("#orderid").val(orderId);
            $("#addflag").val("1");
            initDetailsPage();
        } else {  // add
            $("#addorderbtn").val("添加订单");
            //清空表单元素值
            $("#orderform")[0].reset();
            $("#orderform").attr("action", "orders/addPurchaseOrder");
            $("#addflag").val("0");
        }
    });

    function addorder() {
        var checkflag = checkAll();
        if (!checkflag) {
            return false;
        }

        //<form action="addSupplyOrder" class="fom" id="orderform"
        // $("#orderform").attr("action","addPurchaseOrder");
        $("#orderform")[0].submit();
        return true;
    }

    function preview() {
        var checkflag = checkAll();
        if (!checkflag) {
            return false;
        }
        var formData = new FormData($('#orderform')[0]);
        $.ajax({
            type: "POST",
            url: "previewPurchaseOrder",
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            success: function (data) {
                $("#addflag").val("1");
                $("#orderid").val(data.status);
                json_data = eval(data);
                var tempwindow = window.open('_blank');
                tempwindow.location.href = "../home_detail/purchase_details.jsp?orderId=" + data.status;
            }
        });
        return true;
    }
</script>
</body>
</html>